<template>
    <div class="task-list app-container filter">
        <div ref="search">
            <el-row :gutter="20" class="filter-row">
                <el-col :span="6">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">任务ID</span>
                        <el-input class="w-280" size="default" v-model="filterData.id" placeholder="请输入id"
                            clearable></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">任务名称</span>
                        <el-input class="w-280" size="default" v-model="filterData.task_name" placeholder="请输入任务名称"
                            clearable></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">巡查人员</span>
                        <el-input class="w-280" size="default" v-model="filterData.inspector" placeholder="请输入巡查人员"
                            clearable></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">有无隐患</span>
                        <el-select class="w-280" size="default" v-model="filterData.is_danger" placeholder="请选择"
                            clearable>
                            <el-option v-for="item in dangerOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">有无故障</span>
                        <el-select class="w-280" size="default" v-model="filterData.is_fault" placeholder="请选择"
                            clearable>
                            <el-option v-for="item in guzhangOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">创建时间</span>
                        <el-date-picker style="width:340px" size="default" v-model="filterData.add_time"
                            type="datetimerange" value-format="x" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">开始时间</span>
                        <el-date-picker style="width:340px" size="default" v-model="filterData.start_time"
                            type="datetimerange" value-format="x" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">完成时间</span>
                        <el-date-picker style="width:320px" size="default" v-model="filterData.finish_time"
                            type="datetimerange" value-format="x" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="flexRow">
                        <span class="label" style="width: 80px">结束时间</span>
                        <el-date-picker style="width:280px" size="default" v-model="filterData.end_time"
                            type="datetimerange" value-format="x" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" size="default" @click="subFilter">搜索</el-button>
                    <el-button type="warning" size="default" @click="resetFilter">重置</el-button>
                </el-col>
            </el-row>
        </div>
        <el-card shadow="never">
            <template #header>
                <div class="button-box">
                    <el-button @click="goBack" size="default" type="primary" style="margin-right: 20px">返回</el-button>
                    <el-tabs v-model="is_patrol" size="default" type="card" @tab-click="isPatrolChange">
                        <el-tab-pane label="全部" :name="''"></el-tab-pane>
                        <el-tab-pane label="未巡查" :name="2"></el-tab-pane>
                        <el-tab-pane label="已巡查" :name="1"></el-tab-pane>
                    </el-tabs>
                    <template v-if="showAddTask">
                        <el-button type="primary" plain @click="addTask" class="add-task-btn">添加任务</el-button>
                    </template>

                    <el-button @click="hanldeDelete" size="default" type="danger">批量删除</el-button>
                    <el-button v-if="!is_patrol" type="primary" size="default"
                        @click="addTasklVisible = true">添加</el-button>
                    <el-button v-print="printobj" size="default" type="primary">打印</el-button>
                    <el-button size="default" type="success" @click="onDownExcel">导出</el-button>
                </div>
            </template>
            <el-table :height="pageHeight + 'px'" :data="taskData" id="contents"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="任务名称" prop="name"></el-table-column>
                <el-table-column label="网格名称" prop="area_name" align="center" width="120"></el-table-column>
                <el-table-column label="网格员" prop="realname" align="center" width="120"></el-table-column>
                <el-table-column label="网格员电话" prop="phone" align="center" width="120"></el-table-column>
                <el-table-column label="社会单位名称" prop="unit_name" align="center" width="140"></el-table-column>
                <el-table-column label="是否有隐患" prop="is_danger" align="center" width="110">
                    <template #default="scope">
                        <span>{{ scope.row.is_danger == 0 ? '无' : '有' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否有故障" prop="is_fault" align="center" width="110">
                    <template #default="scope">
                        <span>{{ scope.row.is_fault == 0 ? '无' : '有' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="140" align="center" prop="add_time" :formatter="formatDate">
                </el-table-column>
                <el-table-column label="开始时间" width="140" align="center" prop="start_time" :formatter="formatDate">
                </el-table-column>
                <el-table-column label="完成时间" width="140" align="center" prop="finish_time" :formatter="formatDate">
                </el-table-column>
                <el-table-column label="结束时间" width="140" align="center" prop="end_time" :formatter="formatDate">
                </el-table-column>
                <el-table-column width="200" label="操作" fixed="right" align="center" class="noprint">
                    <template #default="scope">
                        <div>
                            <el-button size="default" @click="showTaskDetail(scope.row)">查看</el-button>
                            <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-info"
                                icon-color="red" title="确定删除？" @confirm="delTask(scope.row)">
                                <template #reference>
                                    <el-button size="default" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @current-change="handleCurrentChange" v-model:currentPage="taskDataInfo.page"
                    :total="taskDataInfo.total" background layout="total,prev, pager, next, jumper">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog v-model="addTasklVisible" width="35%" @close="closeDialog" :close-on-click-modal="false"
            destroy-on-close>
            <div>
                <el-form :label-position="labelPosition" label-width="auto" :model="formData">
                    <el-form-item label="任务名称">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="时间选择">
                        <el-date-picker type="datetimerange" v-model="addTime" @change="startEndDate"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="x">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="任务巡查人">
                        <el-select v-model="formData.unit_user_id" filterable multiple placeholder="请选择">
                            <el-option v-for="item in patrolPersonList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务巡查点">
                        <el-select v-model="formData.info" filterable multiple placeholder="请选择">
                            <el-option v-for="item in pointList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium" @click="submit">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {
            taskData: [],
            taskDataInfo: '',
            opts: {},
            printobj: {
                id: 'contents',
                popTitle: '', // 打印的标题
                extraCss: '', // 打印可引入外部的一个 css 文件
                extraHead: '' // 打印头部文字
            },
            addTasklVisible: false,
            showAddTask: false,
            formData: {
                info: [],
                name: '',
                end_time: '',
                start_time: '',
                unit_user_id: []
            },
            filterData: {
                id: '',
                task_name: '', //任务名称
                realname: '', //巡查人员
                is_danger: '',
                is_fault: '',
                add_time: '',
                start_time: '',
                finish_time: '',
                end_time: ''
            },
            value: [],
            pointList: [],
            patrolPersonList: [],
            is_patrol: '',
            addTime: '',
            guzhangOptions: [
                {
                    value: 1,
                    label: '有'
                },
                {
                    value: 0,
                    label: '无'
                }
            ],
            dangerOptions: [
                {
                    value: 1,
                    label: '有'
                },
                {
                    value: 0,
                    label: '无'
                }
            ],
            pageHeight: 0,
            ids: []
        }
    },
    created() {
        this.opts = Object.assign({}, this.opts, this.$route.query)
        this.initTaskList()
        this.initInfo() //巡查点列表获取+巡查人获取
    },
    mounted() {
        this.pageHeight = window.innerHeight - this.$refs.search.clientHeight - 280;
    },
    methods: {
        handleSelectionChange(row) {
            this.ids = row.map(item => item.id)
        },
        // 批量删除
        hanldeDelete() {
            if (this.ids.length == 0) {
                this.$message({
                    message: '请选择要删除的数据',
                    type: 'warning'
                });
                return
            }
            this.$confirm('你确定删除这些数据吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.post('/unit/PatrolTask/batchDeletion', {
                    ids: this.ids
                }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initTaskList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        closeDialog() {
            this.addTasklVisible = false;
        },
        goBack() {
            this.$router.go(-1)
        },
        initInfo() {
            this.$api.post('/unit/PatrolPosition/all', this.opts).then((res) => {
                this.pointList = res.data
            })
            let params = {
                not_admin: 1,
                authority: ['sub_unit_worker']
            }
            this.$api.post('/unit/UnitContacts/all', { ...this.opts, ...params }).then((res) => {
                this.patrolPersonList = res.data
            })
        },
        formatDate(row, column, time, index) {
            if (time) {
                return new Date(parseInt(time) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ')
            } else return ''
        },
        onDownExcel() {
            this.$api
                .post(
                    '/unit/PatrolTask/ListDerive',
                    {
                        sub_unit_id: this.opts.sub_unit_id,
                        is_patrol: this.is_patrol,
                        is_admin: 1
                    },
                    {
                        responseType: 'blob'
                    }
                )
                .then((res) => {
                    const blob = new Blob([res], {
                        type: 'application/vnd.ms-excel'
                    })

                    if (window.navigator.msSaveOrOpenBlob) {
                        //兼容IE10
                        navigator.msSaveBlob(blob, '导出文件.xlsx')
                    } else {
                        const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
                        const a = document.createElement('a') //创建a标签
                        a.style.display = 'none'
                        a.href = href // 指定下载链接
                        a.download = '导出文件.xlsx' //指定下载文件名
                        a.click() //触发下载
                        URL.revokeObjectURL(a.href) //释放URL对象
                    }
                })
            // .catch((err) => {
            //   console.log(err)
            // })
        },
        handleCurrentChange(e) {
            this.initTaskList(e)
        },
        startEndDate(e) {
            this.formData.start_time = e[0]
            this.formData.end_time = e[1]
        },
        isPatrolChange(e) {
            this.is_patrol = e.paneName

            this.initTaskList()
        },
        subFilter() {
            //提交过滤
            this.initTaskList()
        },
        resetFilter() {
            //过滤重置
            this.filterData = {
                id: '',
                task_name: '', //任务名称
                inspector: '', //巡查人员
                is_danger: '',
                is_fault: '',
                add_time: '',
                start_time: '',
                finish_time: '',
                end_time: ''
            }
            this.initTaskList()
        },
        initTaskList(page) {
            let pageData = {
                is_patrol: this.is_patrol,
                rows: 13,
                sub_unit_id: this.$route.query.sub_unit_id
            }
            if (page) {
                pageData.page = page
            } else {
                pageData.page = 1
            }
            pageData.is_admin = 1
            // for (let filterKey in this.filterData) {
            //     if (!this.filterData[filterKey]) continue
            //     pageData[filterKey] = this.filterData[filterKey]
            // }

            let data = Object.assign(pageData, this.filterData)
            this.$api.post('/unit/PatrolTask/lists', data).then((res) => {
                this.taskData = res.data.lists
                delete res.data.lists
                this.taskDataInfo = res.data
            })
        },
        showTaskDetail(row) {
            //查看详细
            this.$router.push({
                name: 'unitSubTaskMangeDetail',
                query: {
                    id: row.id
                }
            })
        },
        delTask(data) {
            //删除任务
            this.$api.post('/unit/PatrolTask/delete', { id: data.id }).then((res) => {
                this.initTaskList()
            })
        },
        addTask() {
            this.addTasklVisible = true
        },
        submit() {
            let data = Object.assign(this.formData, this.opts)
            console.log(data)
            this.$api.post('/unit/PatrolTask/addTaskPoint', data).then((res) => {
                this.initTaskList()
                this.addTasklVisible = false
            })
        }
    }
}
</script>
<style scoped lang="scss">
.button-box {
    display: flex;
    align-items: center;
}

.add-task-btn {
    float: right;
}

.start-end-date {
    margin: 30px 0;
}

.add-btn-wrapper {
    display: flex;
    justify-content: space-around;
    padding: 30px 0 20px;
}

.el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: 10px;
}

:deep(.el-cascader-panel .el-radio__input) {
    visibility: hidden;
}

.el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
}

.block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px
}

.filter {
    background-color: #fff;

    .filter-row {
        .el-col-6 {
            display: flex;
            align-items: center;
            max-width: 20%;
        }

        .el-col-8 {
            margin-bottom: 20px;
        }

        .flexRow {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            .label {
                width: 80px;
            }
        }
    }

    .filter-btns {
        text-align: right;
    }
}

@media print {
    .el-table {
        :deep(.el-table-fixed-column--right) {
            display: none;
        }
    }

    .print {
        display: block;
    }
}

@page {
    size: auto;
    /* auto is the initial value */
    margin: 3mm;
    /* this affects the margin in the printer settings */
}

.w-280 {
    width: 280px !important;
}

::v-deep .el-tabs__header {
    margin: 0 20px 0 0 !important;
}
</style>
